<!DOCTYPE html>
<html lang="en">
    <head>
<!-- <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.5.2.min.js"></script>  -->
<!-- <script type="text/javascript" src="<?php echo base_url(); ?>/js/queue.js"></script>  -->
        <meta charset="utf-8"/>	
        <style>
            #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
            #sortable tr { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
            #sortable tr span { position: absolute; margin-left: -1.3em; }
        </style>
        <script type="text/javascript" src="<?php echo base_url(); ?>yogette/js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>yogette/js/jquery-ui-1.8.11.custom.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#sortable").sortable({
                    placeholder: 'ui-state-highlight', 
                    stop: function(i) {
                        placeholder: 'ui-state-highlight',
                        $.ajax({

                            type: "POST",

                            url: "<?= base_url() . 'test/update_queue' ?>",

                            data: $("#sortable").sortable("serialize")});

                    }
                });
                $("#sortable").disableSelection();
            });
        </script>
    </head>
    <body>
        <div class="demo">
            <ul>
                <li id="draggable" class="ui-state-highlight">Movies Queue</li>
            </ul>
            <table cellspacing="0" cellpadding="4" border="0">
                <thead>
                    <tr>
                        <td>Movie Title</td>
                        <td>Order ID</td>
                        <td>Actions</td>
                    </tr>
                </thead>
                <tbody id="sortable">
                    <?php
                    foreach ($movies_queue as $movies_queue) {
                        $catid = $movies_queue['order_id'];
                        echo "<tr id='item_$catid' class='ui-state-default'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>" . "<td>" . $movies_queue['film_title'] . "</td><td>" . $movies_queue['order_id'] . "</td><td>" . anchor('member/delete_queue/' . $movies_queue['film_id'] . '/1/' . $movies_queue['cus_priority'] . '/' . $movies_queue['order_id'], ' Delete', array('class' => 'delete')) . "</td></tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div><!-- End demo -->
        <div class="demo-description">
            <p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p>
        </div><!-- End demo-description -->
    </body> 
</html>  